import styled from 'styled-components'


export const CommontWrap=styled.div`
          background:#f0f0f0;
          height:100%;
         header{
             height:.44rem;
             padding-left:.1rem;
             display: flex;
             align-items:center;
            em{
                display:inline-block;
                flex:1;
                text-align:center;
                font-size:.18rem;
                color:#000;
            } 
         }
         main{
             height:100%;
             overflow-y:scroll;
             padding-bottom:.4rem;
             .nav{
                 ul{
                     display: flex;
                     flex-direction:row;
                     height:.548rem;
                     background:white;
                     padding:.15rem .15rem .05rem;
                     li{
                        color: #23cc77;
                        border: 1px solid #23cc77;
                        border-radius: 5px;
                        padding:0 .05rem;                       margin-right:.1rem;
                        line-height:.3rem;
                        &.shows{
                            color:#fff;
                            background:#23cc77;
                        }
                     }
                 }
             }
             .list{
                 margin-top:.1rem;
                 padding:.15rem .15rem;
                 background:#fff;
               .head{
                   display: flex;
                   justify-content:space-between;
                   align-items:center;
                   >span{
                       img{
                           width:.32rem;
                           height:.32rem;
                           border-radius:100%;
                       }
                       .time{
                           display: block;
                           margin-left:.3rem;
                           color:#999;
                           font-size:.12rem;
                       }
                     .sat{
                        display: inline-block;
                        background-color: #23cc77;
                        color: #fff;
                        border-radius:.1rem;
                        padding:.04rem;
                        margin-left:.1rem;
                     }  
                    
                   } 
                   .other{
                         color:#23cc77;
                         font-size:.15rem;
                     }
               }
               p{   
                   margin-top:.1rem;
                   color:#000;
                   font-size:.14rem;
               }
               .imgs{
                   ul{ 
                       position: relative;
                       margin-top:.1rem;
                       display: flex;
                       flex-direction:row;
                       overflow:hidden;
                       li{
                           margin-right:.1rem;
                           img{
                              width:1.09rem;
                           height:.8rem; 
                           }                         
                       }
                       .total{
                           position: absolute;
                           right:0;
                           bottom:0;
                           font-size:.12px;
                           color:#fff;
                           background:#23cc77;
                       }
                   }
               }
             }
             .foot{
                 padding:.1rem 0;
                 display: flex;
                 justify-content:center;
                 em{
                      font-size:.14rem;
                        color: #33bc60;
                 }
                 span{
                     font-size:.1rem;
                     color:#000;
                 }
             }
         }
`